import React, { useState } from 'react'
import {
  Box,
  Tabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel
} from '@chakra-ui/core'
import SignUp from './SignUp'
import SignIn from './SignIn'

function Form () {
  const [index, setIndex] = useState(0)
  const handleChange = index => setIndex(index)

  return (
    <Box bgColor="white" w="400px" p="30px" borderRadius="md" boxShadow="md">
      <Tabs isFitted colorScheme="twitter" index={index} onChange={handleChange}>
        <TabList w="50%" mx="auto" mb="30px">
          <Tab mr={2} _focus={{ boxShadow: 'none' }} _active={{ bgColor: 'white' }} _hover={{ borderColor: '#1a94da' }}>注册</Tab>
          <Tab ml={2} _focus={{ boxShadow: 'none' }} _active={{ bgColor: 'white' }} _hover={{ borderColor: '#1a94da' }}>登录</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignUp setIndex={setIndex}/>
          </TabPanel>
          <TabPanel>
            <SignIn />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  )
}

export default Form